<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./src/css/index.css">
    <link rel="stylesheet" href="./src/lib/layui/css/layui.css" media="all">
</head>

<body>
    <div id="head"></div>
    <div class="layui-carousel" id="test1">
        <div carousel-item>
            <div><img src="./src/images/sy1.png" alt=""></div>
            <div><img src="./src/images/sy2.png" alt=""></div>
            <div><img src="./src/images/sy3.png" alt=""></div>
            <div><img src="./src/images/sy4.png" alt=""></div>
            <div><img src="./src/images/sy5.png" alt=""></div>
        </div>
    </div>
    <div id="c1">
        <div id="c1_1">
            <div id="b1">
                <div id="a1">
                    <img src="./src/images/sy11.png" alt="">
                    <a href="#">主题键盘></a>
                </div>
                <div id="a2">
                    <img src="./src/images/sy9.png" alt="">
                    <a href="#" class="a2_1">主题键盘></a>
                    <a href="#" class="a2_2">开始定制></a>
                </div>
            </div>
            <div id="b2">
                <div id="a3">
                    <div id="a3_3">
                        <img src="./src/images/sy10.png" alt="">
                        <a href="#">主题键盘</a>
                    </div>
                    <div id="a3_1">
                        <img src="./src/images/sy14.png" alt="">
                    </div>
                    <div id="a3_2">
                        <img src="./src/images/sy15.png" alt="">
                    </div>
                </div>

                <div id="a4">
                    <img src="./src/images/sy8.png" alt="">
                    <a href="#" class="a4_1">主题键盘></a>
                    <a href="#" class="a4_2">开始定制></a>
                </div>
            </div>
            <div id="b3">
                <div id="a5">
                    <img src="./src/images/sy7.png" alt="">
                    <a href="#">主题键盘</a>
                </div>
                <div id="a6">
                    <img src="./src/images/sy6.png" alt="">
                    <a href="#" class="a6_1">主题键盘></a>
                    <a href="#" class="a6_2">开始定制></a>
                </div>
            </div>
        </div>
    </div>
    <div id="footer"></div>
</body>
<script src="./src/lib/jquery-1.11.3.js"></script>
<script src="./src/lib/layui/layui.js"></script>
<script src="./src/js/index.js"></script>

<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , height: '527px'
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>

</html>